import Vue from 'vue'
import VueRouter from 'vue-router'

import store from '../store/index.js'
// import Login from '../views/Login/login.vue'
const Login = () => import('../views/Login/login.vue')
// import Main from '../views/main/main.vue'
const Main = () => import('../views/main/main.vue')

// import Home from '../views/main/Home.vue'
const Home = () => import('../views/main/Home.vue')

// import User from '../views/main/User.vue'
const User = () => import('../views/main/User.vue')

// import Search from '../views//Search/Search.vue'
const Search = () => import('../views//Search/Search.vue')

// import SearchReault from '../views//Search/SearchResult.vue'
const SearchReault = () => import('../views//Search/SearchResult.vue')

// import AeticleDetail from '../views//ArticleDetal/ArticleDetal.vue'
const AeticleDetail = () => import('../views//ArticleDetal/ArticleDetal.vue')

// 导入修改用户信息的组件
// import UserEdit from '../views/UserEdit/UserEdit.vue'
const UserEdit = () => import('../views/UserEdit/UserEdit.vue')

// import Chat from '../views/Chat/Chat.vue'
const Chat = () => import('../views/Chat/Chat.vue')
// 1. 将 VueRouter 本身提供的 $router.push 方法转存到常量中
const originalPush = VueRouter.prototype.push
// 2. 自定义 $router.push 方法，在内部调用原生的 originalPush 方法进行路由跳转；并通过 .catch 捕获错误
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 通过 .catch 捕获错误
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)

const routes = [
  {
    // 带有name属性的路由规则,叫做'命名路由'
    path: '/login',
    component: Login,
    name: 'login'
  },
  // 主页路由规则
  {
    path: '/',
    component: Main,
    // 如果children加载了默认子路由,则父不需要交name
    children: [
      {
        // path为空字符串的子路由规则,叫做'默认子路由'
        path: '',
        component: Home,
        name: 'home',
        meta: { isRecord: true, top: 0 }
      },
      {
        // 注意:子路由不建议加斜线
        path: 'User',
        component: User,
        name: 'user'
      }
    ]
  },
  {
    path: '/search',
    component: Search,
    name: 'search'
  },
  // 搜索结果页的路由规则
  {
    // /search/app
    path: '/search/:kw',
    component: SearchReault,
    name: 'searchReault',
    // 开启成功之后,就可以在component指向组件中,通过props来接收路由参数
    props: true,
    meta: { isRecord: true, top: 0 }
  },
  // 文章详情的路由规则
  {
    path: '/artice/:id',
    component: AeticleDetail,
    name: 'aeticleDetail',
    // 开启成功之后,就可以在component指向组件中,通过props来接收路由参数
    props: true,
    meta: { isRecord: true, top: 0 }
  },
  // 编辑用户信息的路由规则
  {
    path: '/user/edit',
    component: UserEdit,
    name: 'user-edit'
  },
  // 智能聊天的路由规则
  {
    path: '/chat',
    component: Chat,
    name: 'Chat'
  }
]

const router = new VueRouter({
  routes
})
// 挂载前置导航守卫,用来优化进入页面点击我的,如果没有登录会强制跳转到登录页面,
// 登录后如果token值过期则在点击编辑资料时会强制跳转到登录页面
router.beforeEach((to, from, next) => {
  // 判断用户访问的path地址是否为/user或/user/edit
  // 如果是,一个判断用户是否登录
  // 如果判断用户是否登录了呢?可以从vuex中读取一下token的值,如果有值,证明登陆了,放行即可
  // 如果没有token的值,则证明没有登录,强制用户跳转登录页
  if (to.path === '/user' || to.path === '/user/edit') {
    // 访问的是有权限的页面.需要判断用户是否登录了
    const tokenStr = store.state.tokenInfo.token
    if (tokenStr) {
      // token放行
      next()
    } else {
      // 要访问有权限的页面,但是没登录,强制跳转到登录页面
      next('/login?pre=' + to.fullPath)
    }
  } else {
    next()
  }
})
router.afterEach((to, from) => {
  if (to.meta.isRecord) {
    // 证明to这个路由中保存了元信息
    // 把元信息读取出来,赋值给浏览器的滚动条即可

    // 延时函数,等DOM更新完成后再执行此方法1
    /*
    setTimeout(() => {
      window.scrollTo(0, to.meta.top)
    }, 0)
    */
    // 延时函数,等DOM更新完成后再执行此方法2
    Vue.nextTick(function () {
      window.scrollTo(0, to.meta.top)
    })
  }
})
export default router
